<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="角色名" prop="roleName">
            <el-input v-model="form.roleName" placeholder="请输入角色名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="roleSort">
            <el-input-number v-model="form.roleSort" style="width: 100%" controls-position="right" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="菜单权限">
            <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
            <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
            <el-tree
              ref="menuTree"
              class="tree-border"
              :data="menuOptions"
              show-checkbox
              node-key="menuId"
              empty-text="加载中，请稍后"
              :render-after-expand="false"
              :props="{label: 'menuName'}"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="dialog-footer">
        <el-button v-if="!loading" type="primary" @click="add">提 交</el-button>
        <el-button v-else type="primary">提交中...</el-button>
        <el-button type="warning" @click="reset()">重 置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import formApi from '@/api/system/sys-role'
import api from '@/api/system/sys-menu'

export default {
  data() {
    return {
      loading: false,
      // 表单对象
      form: {},
      // 菜单全选集合
      menuOptions: [],
      // 展开/不展开
      menuExpand: false,
      // 全选/不全选
      menuNodeAll: false,
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        roleKey: [
          { required: true, message: '权限字符不能为空', trigger: 'blur' }
        ],
        roleSort: [
          { required: true, message: '角色顺序不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getSelectTree()
  },
  methods: {
    // 添加角色
    add() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.menuId = this.getMenuAllCheckedKeys()
          formApi.add(this.form).then(res => {
            this.$message.success(res.msg)
            // 关闭对话框，并刷新列表
            this.$emit('close')
            this.$emit('after')
          })
        }
      })
    },
    // 重置
    reset() {
      this.resetForm('form')
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      const checkedKeys = this.$refs.menuTree.getCheckedKeys()
      const halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys()
      checkedKeys.push(...halfCheckedKeys)
      return checkedKeys
    },
    // 构造树形菜单
    getSelectTree() {
      this.form.params = {
        role: 'role'
      }
      api.getTreeList(this.form).then(res => {
        // 清空菜单集合
        this.menuOptions = []
        this.menuOptions = res.data
      })
    },
    //  树权限（展开/折叠）
    handleCheckedTreeExpand(value) {
      const treeList = this.menuOptions
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.menuTree.store.nodesMap[treeList[i].menuId].expanded = value
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value) {
      this.$refs.menuTree.setCheckedNodes(value ? this.menuOptions : [])
    }
  }
}
</script>

<style scoped>

</style>
